<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            text-align: lift;
            width: 500px;
            margin: 10px auto;
        }

        .picture {
            width: 400px;
        }
    </style>
</head>

<body>
    <div id="warp">
        <form action="URL" method="get" action="#" enctype="multipart/form-data">
            <h4 style="color: rgb(30, 0, 255);">欢迎注册会员</h4>
            <label>
                手机号码：<input type="text" name="userphone" placeholder="11位手机号码" maxlength="11"><span
                    style="color: red;">必填</span>
            </label>
            <br>
            <label>创建密码：<input type="password" name="pwd" placeholder="8位密码"><span style="color: red;">必填</span></label>
            <br>
            <label>
                注册邮箱：<input type="email" name="useremail" placeholder="例如wust@666.com"><span
                    style="color: red;">必填</span>
            </label>
            <br>
            <label>&nbsp&nbsp;验证码：
                <input type="text">
                <span id="captcha"></span>
                <button type="button" id="refresh">刷新验证码</button>
            </label>
            <br>
            <div> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性别：
                <label><input type="radio" name="sex" value="male" checked="checked">男</label>
                <label><input type="radio" name="sex" value="female">女</label>
            </div>
            <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp生日：<input type="date" name="brithday"></label>
            <br>
            <label> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp年龄：<input type="text" name="old"></label>
            <br>
            <label>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp籍贯：<select name="" size="1">
                    <option value="0" selected="selected">湖北</option>
                    <option value="1">湖南</option>
                    <option value="2">江西</option>
                </select>
                <select name="" size="1">
                    <option value="0" selected="selected">武汉</option>
                    <option value="">荆州</option>
                    <option value=""></option>
                </select>
            </label>
            <br>
            <label>个人学历：
                <select name="" size="1">
                    <option value="0">文盲</option>
                    <option value="1">小学</option>
                    <option value="2">初中</option>
                    <option value="3">高中</option>
                    <option value="4" selected="selected">本科</option>
                    <option value="5">硕士</option>
                    <option value="6">博士</option>
                </select>
            </label>
            <br>
            <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp月薪：
                <input type="range" id="score" name="score" min="0.0" mxa="100" step="0.5" value="60.0">
                <span id="msg"></span>
            </label>
            <div>
                个人爱好：
                <label><input type="checkbox" name="like" value="">唱歌</label>
                <label><input type="checkbox" name="like" value="">跑步</label>
                <label><input type="checkbox" name="like" value="">游泳</label>
            </div>
            <div class="picture">
                <p>图片预览：</p>
                <p></p>
                <div id="test-image-preview" style="border: 1px solid silver; width: 100%; height: 200px; background-repeat: no-repeat; 
background-position: center;">
                </div>
                <p></p>
                <p>
                    <input type="file" id="test-image-file" name="test">
                </p>
                <p id="test-file-info">没有选择文件</p>
            </div>
            <div>简历：
                <textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
            </div>
            <div>
                <input type="submit" value="提交">
                <input type="reset" value="重填">
            </div>
        </form>
    </div>
</body>
<script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window.onload = function () {
        msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
    }
    document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    }
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');
    fileInput.addEventListener('change', function () { // 监听change事件
        preview.style.backgroundImage = ''; // 清除背景图片 
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) { // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...' 
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });

    function generateCaptcha() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let captcha = '';
        for (let i = 0; i < 6; i++) { // 生成六位验证码
            captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById('captcha').textContent = captcha; // 显示验证码
    }

    document.getElementById('refresh').addEventListener('click', generateCaptcha);

    // 初始化时生成验证码
    generateCaptcha();
</script>
</html>